<template>
  <div class="weui-panel" style="background-color: #fff;" ref="list" @click="playSound">
    <div class="weui-cell weui-flex list-title">
      <div class="weui-flex__item" v-for="(t, index) in listTitle" :key="index">{{t}}</div>
    </div>

    <div class="weui-cell weui-flex" v-for="(source, index) in listData" :key="index" @click="showOperation(source)">
      <div class="weui-flex__item">
        <img class="list-user-img" :src="source.headUrl" alt="">
      </div>
      <div class="weui-flex__item">
        <p class="nickname-text">{{source.nickname}}</p>
        <p>{{source.lftid}}</p>
      </div>
      <div class="weui-flex__item">
        {{source._rule.confName}}
        <!-- <img src="img/diamonds-b.png" alt="" class="sell-diamonds">{{source.price}} -->
      </div>
      <div class="weui-flex__item">
        <p class="info-grey">{{source._date}}</p>
        <p>{{source._time}}</p>
      </div>
    </div>

    <div class="no-data" v-show="!listData.length && !loading">暂无数据</div>

    <div class="weui-loadmore" v-show="loading">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>

  </div>
</template>

<script>
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      listTitle: ['头像', '昵称/ID', '玩法名称', '时间'],
      listData: [],
      loading: false,
      offset: 0,
      limit: 50,
      noMore: false
    }
  },
  mounted() {
    // this.fakeData()
    this.query()
    this.initInfinite()
  },
  methods: {
    playSound() {
      window.btn_sound.play();
    },
    fakeData() {
      this.listData = [{nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}]
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        this.query()
      });
    },
    query(refresh) {
      const send = {
        limit: this.limit,
        offset: this.offset,
        uid: this.myGroupInfo.uid
      }
      console.log('send', send)
      this.loading = true
      this.api.group.getApplyList(send).then(res => res.json()).then(data => {
        console.log(data)
        this.loading = false
        if (data.result) {
          $(this.$refs.list).destroyInfinite()
          return
        }
        const dataList = data.data.dataList
        // if (dataList.length === 0) {
        //   dataList.push({
        //     'id': 2,
        //     'lftid': 100005,
        //     'nickname': '薄荷红茶',
        //     'createTime': 1505290874000,
        //     '_rule': this.ruleList.find(rule => parseInt(rule.id) === parseInt(source.confId)) || {},
        //     'headUrl': 'https://wx.qlogo.cn/mmopen/vi_32/P1gYnyZB9azUrDicY7Iia0DxIm8LEMUNoQ7XAk3N7PjTqAJsCRXRiayVeQkHhMzgamSpmMiaSfTnX53faTSqNSIdCA/0'
        //   })
        // }
        this.noMore = dataList.length === 0
        if (this.noMore) {
          $(this.$refs.list).destroyInfinite()
        }
        console.log('this.ruleList', this.ruleList);
        dataList.forEach(source => {
          source._date = util.getDate(source.createTime)
          source._time = util.getTime(source.createTime)
          source._rule = this.ruleList.find(rule => parseInt(rule.id) === parseInt(source.confId)) || {}
        });
        if (refresh === 'refresh') {
          this.listData = dataList
        } else {
          this.listData = this.listData.concat(dataList)
        }
        this.listData.sort((a, b) => a.time < b.time)
        console.log(this.listData);
      })
    },
    showOperation(source) {
      $.modal({
        title: '查看申请',
        text: source.nickname,
        buttons: [
          {
            text: '拒绝',
            className: 'default',
            onClick: () => {
              const params = {
                applyStatus: 2,
                id: source.id
              }
              this.doAudit(params)
            }
          },
          {
            text: '同意',
            onClick: () => {
              const params = {
                applyStatus: 1,
                id: source.id
              }
              this.doAudit(params)
            }
          },
          {
            text: '取消',
            className: 'default',
            onClick: () => {

            }
          },
        ]
      });
    },
    doAudit(params) {
      this.api.group.auditApply(params).then(res => res.json()).then(data => {
        $alert(data.message, () => {
          if (data.result) {
            return
          }
          this.query('refresh')
        })
      })
    }
  },
  computed: {
    ...mapState(['api', 'myGroupInfo', 'ruleList'])
  },
  components: {
  }
}

</script>

<style lang="less">

</style>